<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favico.ico">
    <title>评估问卷</title>

    <link rel="stylesheet" href="../css/page-health-riskQuestion.css" />

    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>

</head>

<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app">
    <!-- 页面头部 -->
    <div class="top-header">
            <span class="f-left">
                <a href="javascript:history.back(-1)" style="color: white">
                    <span class=""><i class="icon-back"></i>返回</span>
                </a>
            </span>
        <span class="center">千锋健康</span>
        <span class="f-right"><i class="icon-more"></i></span>
    </div>
    <!-- 页面内容 -->
    <div class="contentBox">
        <div class="question">

            <div class="q-tit" v-show="dataIndex === index" v-for="(item, index) in data" :key="index">
                <!--                    <p class="type-num">{{dataIndex + 1}}/{{data.length}}</p>-->
                <p class="type-num"><i class="cur-num">{{dataIndex + 1}}</i>/{{data.length}}.{{item.subject.title}}</p>
                <p>{{item.subject.describe}}</p>
            </div>
            <div class="q-choose">
                <div class="choose-items">
                    <transition-group :name="transitionName">
                        <div class="problemList" v-show="dataIndex === index" v-for="(item, index) in data" :key="index">
                            <!--                                <div class="subject">-->
                            <!--                                    <h3>{{dataIndex + 1}}/{{data.length}}.{{item.subject.title}}</h3>-->
                            <!--                                    <p>{{item.subject.describe}}</p>-->
                            <!--                                </div>-->
                            <div class="option">
                                <ul class="clearfix">
                                    <!--                                    <li v-if="item.multiSelect == 0" v-for="(li, liIndex) in item.subject.option"-->
                                    <li v-for="(li, liIndex) in item.subject.option"
                                        :key="liIndex" @click="choiceRadio(index,liIndex)">
                                        <input type="radio" :value="li" v-model="item.checkbox" />
                                        <span>{{li}}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </transition-group>
                </div>
                <div class="tool-btn">
                    <span v-show="isPrev" class="btn next-btn" @click="prev">上一题</span>
                    <span v-show="isNext" class="btn next-btn" @click="next">下一题</span>
                    <span v-show="isSubmit" class="btn next-btn" @click="save">完成</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 页面 css js -->
<!-- <script src="health-index.js"></script> -->
<script>

    new Vue({
        el: '#app',
        data: {
            transitionName: 'slide',
            data: [{
                subject: {//1
                    title: '',
                    describe: '您是否患有高血压？（单选）',
                    option: ['是', '否', '不知道' ], //选项
                },
                checkbox: [],
                //multiSelect: 0, //2为多选、0为单选、1为组合单选
                isSelect: false, //判断是否选中其中一个
                isFirst: true, //判断是否点击多选第一个按钮
                isAddData: false, //判断是否已加载新数据
            },
                {
                    subject: {//2
                        title: '',
                        describe: '您是否有糖尿病或血糖过高的问题？（单选）',
                        option: ['是', '否', '不知道'], //选项
                    },
                    checkbox: [],
                    isSelect: false, //判断是否选中其中一个
                    isFirst: true, //判断是否点击多选第一个按钮
                    isAddData: false, //判断是否已加载新数据
                },
                {
                    subject: {//3
                        title: '',
                        describe: '您知道您的总胆固醇（TC）水平吗？（单选）',
                        option: ['正常', '偏高', '偏低','不知道' ], //选项
                    },
                    checkbox: [],
                    isSelect: false, //判断是否选中其中一个
                    isFirst: true, //判断是否点击多选第一个按钮
                    isAddData: false, //判断是否已加载新数据
                },
                {
                    subject: {//4
                        title: '',
                        describe: '您知道目前您血液中高密度脂蛋白（HDL一C）水平吗？（单选）',
                        option: ['正常',  '偏低','不知道' ], //选项
                    },
                    checkbox: [],
                    isSelect: false, //判断是否选中其中一个
                    isFirst: true, //判断是否点击多选第一个按钮
                    isAddData: false, //判断是否已加载新数据
                },
                {
                    subject: {//5
                        title: '',
                        describe: '您知道目前您血液中低密度脂蛋白（LDL一C）水平吗？（单选）',
                        option: ['正常',  '偏高','不知道' ], //选项
                    },
                    checkbox: [],
                    isSelect: false, //判断是否选中其中一个
                    isFirst: true, //判断是否点击多选第一个按钮
                    isAddData: false, //判断是否已加载新数据
                },
                {
                    subject: {//6
                        title: '',
                        describe: '心电图（单选）',
                        option: ['异常',  '正常','不清楚' ], //选项
                    },
                    checkbox: [],
                    isSelect: false, //判断是否选中其中一个
                    isFirst: true, //判断是否点击多选第一个按钮
                    isAddData: false, //判断是否已加载新数据
                },
                {
                    subject: {//7
                        title: '',
                        describe: '胸部X线（单选）',
                        option: ['异常',  '正常','不清楚' ], //选项
                    },
                    checkbox: [],
                    isSelect: false, //判断是否选中其中一个
                    isFirst: true, //判断是否点击多选第一个按钮
                    isAddData: false, //判断是否已加载新数据
                },
                {
                    subject: {//8
                        title: '',
                        describe: '肝功能检查（单选）',
                        option: ['异常',  '正常','不清楚' ], //选项
                    },
                    checkbox: [],
                    isSelect: false, //判断是否选中其中一个
                    isFirst: true, //判断是否点击多选第一个按钮
                    isAddData: false, //判断是否已加载新数据
                },
                {
                    subject: {//9
                        title: '',
                        describe: 'CT检查（单选）',
                        option: ['异常',  '正常','不清楚' ], //选项
                    },
                    checkbox: [],
                    isSelect: false, //判断是否选中其中一个
                    isFirst: true, //判断是否点击多选第一个按钮
                    isAddData: false, //判断是否已加载新数据
                },
                {
                    subject: {//10
                        title: '',
                        describe: '超声波检查（单选）',
                        option: ['异常',  '正常','不清楚' ], //选项
                    },
                    checkbox: [],
                    isSelect: false, //判断是否选中其中一个
                    isFirst: true, //判断是否点击多选第一个按钮
                    isAddData: false, //判断是否已加载新数据
                },
                {
                    subject: {//11
                        title: '',
                        describe: '乙肝表面抗原（HBsAg）（单选）',
                        option: ['阴性',  '阳性','不清楚' ], //选项
                    },
                    checkbox: [],
                    isSelect: false, //判断是否选中其中一个
                    isFirst: true, //判断是否点击多选第一个按钮
                    isAddData: false, //判断是否已加载新数据
                },
                {
                    subject: {//12
                        title: '',
                        describe: '抗丙肝抗体（抗HCV）（单选）',
                        option: ['阴性',  '阳性','不清楚'], //选项
                    },
                    checkbox: [],
                    isSelect: false, //判断是否选中其中一个
                    isFirst: true, //判断是否点击多选第一个按钮
                    isAddData: false, //判断是否已加载新数据
                },
                {
                    subject: {//13
                        title: '',
                        describe: '幽门螺杆菌感染（单选）',
                        option: ['阴性',  '阳性','不清楚' ], //选项
                    },
                    checkbox: [],
                    isSelect: false, //判断是否选中其中一个
                    isFirst: true, //判断是否点击多选第一个按钮
                    isAddData: false, //判断是否已加载新数据
                },
                {
                    subject: {//14
                        title: '',
                        describe: '人类乳头瘤病毒感染（单选）',
                        option: ['阴性',  '阳性','不清楚' ], //选项
                    },
                    checkbox: [],
                    isSelect: false, //判断是否选中其中一个
                    isFirst: true, //判断是否点击多选第一个按钮
                    isAddData: false, //判断是否已加载新数据
                },
                {
                    subject: {//15
                        title: '',
                        describe: 'EB病毒感染（单选）',
                        option: ['阴性',  '阳性','不清楚' ], //选项
                    },
                    checkbox: [],
                    isSelect: false, //判断是否选中其中一个
                    isFirst: true, //判断是否点击多选第一个按钮
                    isAddData: false, //判断是否已加载新数据
                },
            ],


            dataIndex: 0, //问题索引
            isPrev: false, //上一题是否显示
            isNext: false, //下一题是否显示
            isSubmit: false, //提交是否显示
            sex: '', //判断性别
            score:0,//评估分数

        },
        mounted() {
            // axios({
            //     url:"/user/get",
            //     method:"get",  //请求方式：get、post、put、delete
            //     params:{   //路径参数，跟在url后面的，通过？拼接成的键值对参数
            //         gender:"男",
            //         age:18
            //     },
            //     data:this.user   , //请求体参数，底层默认是按照application/json格式发送,
            //     headers:{   //请求头
            //         header1:"abc",
            //         header2:"efg"
            //     }
            // }).then(function (data){
            //     let res = data.data.sex;
            //     this.data.sex="男";
            //     alert(res)
            // });

        },
        watch: {
            dataIndex(news, olds) { //动画切换
                this.transitionName = news < olds ? 'slide_back' : 'slide';
            },

        },
        methods: {

            choiceRadio(index, liIndex) { //单选操作
                this.choice(index, liIndex);
            },

            choice(index, liIndex,) {
                this.score = this.score + 5 - liIndex;
                console.log(this.score);
                setTimeout(() => {

                    let radioTitle = this.data[index].subject.title;
                    console.log(radioTitle);



                    if (this.data[index].checkbox.length > 0) {
                        this.isNext = true;
                        this.data[index].isSelect = true;

                    } else {
                        this.isNext = false;
                        this.data[index].isSelect = false;
                    }

                    if (this.dataIndex === (this.data.length - 1)) { //判断是否是最后一题，并隐藏下一题按钮
                        this.isNext = false;
                    }
                    //    console.log(this.data[index].checkbox)
                })

            },

            prev() { //上一题
                this.dataIndex -= 1;
                if (this.dataIndex <= 0) {
                    this.isPrev = false;
                }
                this.isNext = true;
                this.isSubmit = false;
            },
            next() { //下一题
                this.dataIndex += 1;
                //打开cookie携带开关
                axios.defaults.withCredentials = true;

                if (this.dataIndex > 0) {
                    this.isPrev = true;
                    if (this.data[this.dataIndex].isSelect) {
                        this.isNext = true;
                    } else {
                        this.isNext = false;
                    }
                }
                if (this.data.length - 1 == this.dataIndex) {
                    this.isNext = false;
                    this.isSubmit = true;
                }
            },
            save() { //保存数据---这是完成按钮
                if (this.data[this.dataIndex].isSelect) {

                    axios({
                        url:"http://localhost:81/risk/riskscore",
                        method: "post",
                        params:{score:this.score},
                        headers:{
                            //Bearer token的规范是：Authorization名称的头，值为Bearer空格+具体的jwt串
                            "Authorization":"Bearer " + localStorage.getItem("token")
                        }
                    }).then(resp=>{
                        console.log(resp.data);
                        //判断是否有刷新的token
                        let refreshToken = resp.headers.refresh_token;
                        if (refreshToken!=null&&refreshToken.length!=0){
                            localStorage.setItem("token",refreshToken)
                        }
                        let res = resp.data;
                        if (res.code == 2000){
                            //没有登录  -- 跳转到登录页面
                            location.href = "/pages/health-login.html"
                        }else if(res.code == 3000){
                            //没有权限
                        }else if(res.code == 1000){
                            //访问数据成功
                            this.msg = res;
                        }
                    });
                    console.log(this.data); //this.data---需要保存到数据库的数据

                } else {
                    alert(this.data[this.dataIndex].subject.describe = '必选');
                }
            },
        }
    });

</script>

</body>